// 接收参数
import { provide, defineComponent, Slot, VNodeProps, ref, VNode } from 'vue'
import doalogs from './dialog'
import './modal.less'

export interface Dialog {
  visible?: boolean //是否展示
  mask?: boolean //遮罩是否展示
  open?: () => {} //打开的api
  colse?: () => {} //关闭的api
  getContainer?: () => {} //指定modal挂载节点
  // 问题 ==== 每次关闭等于卸载组件
}

declare type InternalSlots = {
  [name: string]: Slot | undefined
}
interface MySlot {
  header: () => JSX.Element
  default: () => JSX.Element
  footer: () => JSX.Element
  [key: string]: () => JSX.Element
}
// export default defineComponent({
//   name:'vDialog',
//   setup(props,{attrs,slots}) {
//     return () => (
//     <>
//       <div {...attrs}>123</div>
//       <h1>{slots.default ? slots.default(): '123123123'}</h1>
//       {/* <h1 v-slots={slots}></h1> */}
//     </>
//     )
//   }
// })

export default function (
  props: VNodeProps,
  { attrs, slots }: { attrs: Record<string, unknown>; slots: InternalSlots }
) {
  let visible = ref<boolean>(!!attrs.visible || false)
  const handleClick = () => {
    visible.value = !visible
  }
  // const open = attrs.open ?
  // const myslots: MySlot = {
  //   header: () => <div class="g-container-header">Basic Modal</div>,
  //   default: () => (
  //     <div class="g-container-content">
  //       <h2>你瞅啥？</h2>
  //       <h2>瞅你咋地</h2>
  //       <h2>再瞅一个试试看？</h2>
  //     </div>
  //   ),
  //   footer: () => (
  //     <div class="g-container-footer">
  //       <a-button style={{ 'margin-right': '12px' }}>取消</a-button>
  //       <a-button type="primary">确定</a-button>
  //     </div>
  //   ),
  // }
  // 声明组件
  doalogs
  const maskBoolean = attrs.mask ? attrs.mask : false
  const mask = <div class="mask"></div>
  return (
    // 下一步处理这里
    <doalogs {...attrs}>
      <div class="g-modal" v-show={visible}>
        {maskBoolean ? mask : ''}
        <div class="g-container-dialog">
          <div class="g-container-modal" style="width:520px">
            <div class="g-container-body">
              <div class="g-container-main">
                {/* {Object.keys(myslots).map((item) =>
                  slots[item] ? slots[item]!() : myslots[item]()
                )} */}
                <div class="g-container-header">
                  {slots.header ? slots.header() : 'Basic Modal'}
                </div>
                <div class="g-container-content">
                  {slots.default ? (
                    slots.default()
                  ) : (
                    <>
                      <h2>你瞅啥？</h2>
                      <h2>瞅你咋地</h2>
                      <h2>再瞅一个试试看？</h2>
                    </>
                  )}
                </div>
                <div class="g-container-footer">
                  {slots.footer ? (
                    slots.footer()
                  ) : (
                    <>
                      <a-button
                        style={{ 'margin-right': '12px' }}
                        onClick={() => (visible.value = !visible.value)}
                      >
                        取消
                      </a-button>
                      <a-button type="primary" onClick={handleClick}>
                        确定
                      </a-button>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </doalogs>
  )
}
